<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入bootstrap的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css"></link>
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css.map"></link>
    <!-- 引入jquery的js  -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstrap的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
    <!-- 引入boostrap的表格的css、js -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"></link>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootbox弹框的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
    <!-- 引入bootbox时间 的css -->
    <link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
    <!-- 引入bootbox时间 的js -->
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- 引入bootbox上传图片 的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
    <!-- 引入bootbox上传图片 的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
    <!-- 引入bootbox开关 按钮 的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-switch-master/css/bootstrap3/bootstrap-switch.css"></link>


    <!-- CSS -->
    <link rel="stylesheet" href="../css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="../css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="../css/magnific-popup.css">
    <link rel="stylesheet" href="../css/select2.min.css">
    <link rel="stylesheet" href="../css/admin.css">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32">
    <link rel="apple-touch-icon" href="icon/favicon-32x32.png">

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Dmitry Volkov">
    <title>买票，就来买票票！欢迎您的登录</title>

    <style>

        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: lightblue;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }

    </style>

</head>
<body>


<!-- sign in -->

<video class="sign section&#45;&#45;bg" src="..\img\bg.mp4" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted" >
<!--<div class="sign section&#45;&#45;bg" data-bg="../img/bg.jpg">-->
</video>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="sign__content">
                    <div>

                    <!-- authorization form -->
                    <form action="#" class="sign__form"  style="background-color: rgba(0,0,0,0.7);margin-left: 700px;">
                       <a style="color: snow" href="index.html" class="sign__logo">
                            <h2>买票票电影</h2>
                        </a>


                        <div style="border-radius: 10px; background-color: rgba(255,165,0,1); width:30px;position:absolute; right: -30px;top: 20px"  >
                            <div style="padding: 6px ;" id="buttt">
                                <h4  > <a style="color: snow" href="javascript:sd()">快捷登录</a></h4>
                            </div>
                        </div>
                        <!--登录------------------------------------------------------------------------------------>
                        <div id="loginFrom">
                            <div class="sign__group">
                                <input type="text" class="sign__input" id="loginName"  placeholder="请输入手机号码">
                            </div>

                            <div class="sign__group">
                                <input type="password" class="sign__input" id="loginPwd"  placeholder="请输入密码">
                            </div>

                            <div class="sign__group sign__group--checkbox">
                                <input id="remember" name="remember" type="checkbox" checked="checked">
                                <label for="remember">记住密码</label>

                            </div>

                            <div id="box" onselectstart="return false;">
                                <div class="bgColor"></div>
                                <div class="txt" >滑动解锁</div>
                                <!--给i标签添加上相应字体图标的类名即可-->
                                <div class="slider"><i class="iconfont icon-double-right"></i></div>
                            </div>

                            <button class="sign__btn" id="loginBut" disabled="disabled" onclick="login()" type="button">登录</button>

                           <!-- <span class="sign__delimiter">or</span>

                            <div class="sign__social">
                                <a class="fb" href="#"><svg viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.56341 16.8197V8.65888H7.81615L8.11468 5.84663H5.56341L5.56724 4.43907C5.56724 3.70559 5.63693 3.31257 6.69042 3.31257H8.09873V0.5H5.84568C3.1394 0.5 2.18686 1.86425 2.18686 4.15848V5.84695H0.499939V8.6592H2.18686V16.8197H5.56341Z"/></svg></a>
                                <a class="tw" href="#"><svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.55075 3.19219L7.58223 3.71122L7.05762 3.64767C5.14804 3.40404 3.47978 2.57782 2.06334 1.1902L1.37085 0.501686L1.19248 1.01013C0.814766 2.14353 1.05609 3.34048 1.843 4.14552C2.26269 4.5904 2.16826 4.65396 1.4443 4.38914C1.19248 4.3044 0.972149 4.24085 0.951164 4.27263C0.877719 4.34677 1.12953 5.31069 1.32888 5.69202C1.60168 6.22165 2.15777 6.74068 2.76631 7.04787L3.28043 7.2915L2.67188 7.30209C2.08432 7.30209 2.06334 7.31268 2.12629 7.53512C2.33613 8.22364 3.16502 8.95452 4.08833 9.2723L4.73884 9.49474L4.17227 9.8337C3.33289 10.321 2.34663 10.5964 1.36036 10.6175C0.888211 10.6281 0.5 10.6705 0.5 10.7023C0.5 10.8082 1.78005 11.4014 2.52499 11.6344C4.75983 12.3229 7.41435 12.0264 9.40787 10.8506C10.8243 10.0138 12.2408 8.35075 12.9018 6.74068C13.2585 5.88269 13.6152 4.315 13.6152 3.56293C13.6152 3.07567 13.6467 3.01212 14.2343 2.42953C14.5805 2.09056 14.9058 1.71983 14.9687 1.6139C15.0737 1.41264 15.0632 1.41264 14.5281 1.59272C13.6362 1.91049 13.5103 1.86812 13.951 1.39146C14.2762 1.0525 14.6645 0.438131 14.6645 0.258058C14.6645 0.22628 14.5071 0.279243 14.3287 0.374576C14.1398 0.480501 13.7202 0.639389 13.4054 0.734722L12.8388 0.914795L12.3247 0.565241C12.0414 0.374576 11.6427 0.162725 11.4329 0.0991699C10.8978 -0.0491255 10.0794 -0.0279404 9.59673 0.14154C8.2852 0.618204 7.45632 1.84694 7.55075 3.19219Z"/></svg></a>
                                <a class="gl" href="#"><svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M473.16 221.48l-2.26-9.59H262.46v88.22H387c-12.93 61.4-72.93 93.72-121.94 93.72-35.66 0-73.25-15-98.13-39.11a140.08 140.08 0 01-41.8-98.88c0-37.16 16.7-74.33 41-98.78s61-38.13 97.49-38.13c41.79 0 71.74 22.19 82.94 32.31l62.69-62.36C390.86 72.72 340.34 32 261.6 32c-60.75 0-119 23.27-161.58 65.71C58 139.5 36.25 199.93 36.25 256s20.58 113.48 61.3 155.6c43.51 44.92 105.13 68.4 168.58 68.4 57.73 0 112.45-22.62 151.45-63.66 38.34-40.4 58.17-96.3 58.17-154.9 0-24.67-2.48-39.32-2.59-39.96z'/></svg></a>
                            </div>-->

                            <div style="width: 300px" >

                                <div style="margin-left: 95px">
                                    <span class="sign__text" >没有帐户? <a href="../page/addUser">注册!</a></span>
                                </div>
                                <br>

                              <div style="margin-left: 115px">
                                    <span class="sign__text"><a href="../page/upPwd">忘记密码?</a></span>
                              </div>
                            </div>
                        </div>
                        <!-------------------------------------------------------------------------------------->


                        <!--快捷登录------------------------------------------------------------------------------------>
                        <div id="quickLogin"  style =" display: none">

                            <div class="sign__group">
                                <input type="text" id="phone" class="sign__input" placeholder="请输入手机号">
                            </div>
                            <div class="sign__group">
                                <input type="password" style="width: 200px" id="code" class="sign__input" placeholder="请输入验证码">
                                <button onclick="sendCode()" id="anew" class="btn btn-primary " type="button">发送验证码</button>
                            </div>
                            <button class="sign__btn" onclick="quickLogin()" type="button">登录</button>

                        </div>
                        <!-------------------------------------------------------------------------------------->




                    </form>
                    <!-- end authorization form -->
                    </div>
 <!--               </div>-->
            </div>
        </div>
      </div>
    </div>
</div>

<!-- end sign in -->

<!-- JS -->
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/smooth-scrollbar.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/admin.js"></script>
</body>

   <script>

       //切换登录形式
       function sd(){
           $("#loginFrom").hide();
           $("#quickLogin").show();
           $("#buttt").html('<h4  > <a style="color: snow" href="javascript:sd2()">账号登陆</a></h4>');
       }
       function sd2(){
           $("#loginFrom").show();
           $("#quickLogin").hide();
           $("#buttt").html('<h4  > <a style="color: snow" href="javascript:sd()">快捷登陆</a></h4>');
       }

       //账号密码登录
       function login(){

           $.ajax({
               url:"../user/login",
               type:"get",
               data:{userName:$("#loginName").val(),userPwd:$("#loginPwd").val()},
               success:function (data) {
                   alert(data)
                   if(data=='登陆成功!!'){
                       location.href="../index2";
                   }
               }
           })
       }

       //快捷登录
       function quickLogin(){
           var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
           if (!reg_tel.test($("#phone").val())) {
               alert("请正确填写您的手机号码！");

               return ;
           }
           $.ajax({
               url:"../user/quickLogin",
               type:"get",
               data:{phone:$("#phone").val(),code:$("#code").val() ,typ: "quickLogin"},
               success:function (data) {
                   alert(data)
                   if(data=='登陆成功!!'){
                         location.href="../index2";
                   }
               }
           })
       }

       //定时器
       counttime=60;//总秒钟

       function timing(){
           if(counttime>=0){
               $("#anew").html(counttime+"s后获取");


               counttime--;
               var tt =  window.setTimeout("timing()",1000);
           }else{
               window.clearTimeout(tt);
               $("#anew").html("获取验证码");
               $("#anew").prop("disabled",false);
               counttime=60;

           }


       }

       //发送验证码
       function sendCode(){
         var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
           if (!reg_tel.test($("#phone").val())) {
               alert("请正确填写您的手机号码！");

               return ;
           }
           $.ajax({
               url:"../user/sendCode",
               type:"get",
               data:{phone:$("#phone").val(),typ: "quickLogin"},
               success:function (data) {
                   alert(data);
                   if(data=="验证码发送成功！"){
                       $("#anew").prop("disabled",true);
                       timing();

                  }


               }
           })
       }





       //一、定义了一个获取元素的方法
       function getEle(selector){
           return document.querySelector(selector);
       }
       //二、获取到需要用到的DOM元素
       var box = getEle("#box"),//容器
           bgColor = getEle(".bgColor"),//背景色
           txt = getEle(".txt"),//文本
           slider = getEle(".slider"),//滑块
           icon = getEle(".slider>i"),
           successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
           downX,//用于存放鼠标按下时的位置
           isSuccess = false;//是否解锁成功的标志，默认不成功

       //三、给滑块添加鼠标按下事件
       slider.onmousedown = mousedownHandler;

       //3.1鼠标按下事件的方法实现
       function mousedownHandler(e){
           bgColor.style.transition = "";
           slider.style.transition = "";
           var e = e || window.event || e.which;
           downX = e.clientX;
           //在鼠标按下时，分别给鼠标添加移动和松开事件
           document.onmousemove = mousemoveHandler;
           document.onmouseup = mouseupHandler;
       };

       //四、定义一个获取鼠标当前需要移动多少距离的方法
       function getOffsetX(offset,min,max){
           if(offset < min){
               offset = min;
           }else if(offset > max){
               offset = max;
           }
           return offset;
       }

       //3.1.1鼠标移动事件的方法实现
       function mousemoveHandler(e){
           var e = e || window.event || e.which;
           var moveX = e.clientX;
           var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
           bgColor.style.width = offsetX + "px";
           slider.style.left = offsetX + "px";

           if(offsetX == successMoveDistance){
               success();
           }
           //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
           e.preventDefault();
       };

       //3.1.2鼠标松开事件的方法实现
       function mouseupHandler(e){
           if(!isSuccess){
               bgColor.style.width = 0 + "px";
               slider.style.left = 0 + "px";
               bgColor.style.transition = "width 0.8s linear";
               slider.style.transition = "left 0.8s linear";
           }else {
                $("#loginBut").prop("disabled",false)
           }
           document.onmousemove = null;
           document.onmouseup = null;
       };

       //五、定义一个滑块解锁成功的方法
       function success(){
           isSuccess = true;
           txt.innerHTML = "解锁成功";
           bgColor.style.backgroundColor ="lightgreen";
           slider.className = "slider active";
           icon.className = "iconfont icon-xuanzhong";
           //滑动成功时，移除鼠标按下事件和鼠标移动事件
           slider.onmousedown = null;
           document.onmousemove = null;
       };


   </script>



</html>